<template>
	<view>
		<image v-bind:src="picUrl" mode=""></image>
	</view>
	<view>
		<image :src="arrs[0]"></image>
		<image :src="arrs[1]"></image>
		<image :src="arrs[2]"></image>
		<image :src="arrs[3]"></image>
	</view>
	
	<button :loading="false">按钮</button>
	 
	<view class="box" :class="{active: isActive}">
		v-bind指令
	</view>
	
	<view class="box" :class="isActive ? 'active' : ''">
		v-bind指令2
	</view>
	
	<view class="box" :style="{width: '300px', height: 260+'px', fontSize: size+'px'}">
		内联样式
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const picUrl = ref("../../static/pic1.png")
const arrs = ref([
	"../../static/pic1.png",
	"../../static/pic2.png",
	"../../static/pic3.webp",
	"../../static/pic4.jpg",
])


const isActive = ref(true)
const size = ref(30)
</script>

<style scoped lang="scss">
.box{
	width: 200px;
	height: 200px;
	background-color: orange;
	font-size: 20px
}
.active{
	background-color: green;
	color: #fff;
}
</style>
